<template>
  <view class="page-box" :class="{ 'is-contrary': contrary }">
    <view class="page-content-top">
      <view>
        <slot name="content-top" />
      </view>
    </view>
    <view class="page-content-bottom">
      <view>
        <slot name="content-bottom" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    contrary: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
  onLoad() {},
  computed: {},
  mounted() {
    // const model = uni.getSystemInfoSync ? uni.getSystemInfoSync()?.model : null;
    // // console.log(model);
    // if (model.indexOf('iPhone') > -1) {
    //   try {
    //     this.$nextTick(() => {
    //       const sysInfo = uni.getSystemInfoSync();
    //       this.$store.commit(
    //         'setNarBottom',
    //         (sysInfo.safeArea.bottom - sysInfo.safeArea.height) / 2
    //       );
    //     });
    //   } catch (error) {
    //     console.log(error);
    //   }
    // }
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  &:not(.is-contrary) {
    & > .page-content-top {
      flex: 0 0 auto;
      & > view {
        width: 100%;
        height: auto;
        position: relative;
      }
    }
    & > .page-content-bottom {
      flex: 1 1 auto;
      height: 100%;
      position: relative;
      & > view {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
  &.is-contrary {
    & > .page-content-bottom {
      flex: 0 0 auto;
      & > view {
        width: 100%;
        height: auto;
      }
    }
    & > .page-content-top {
      flex: 1 1 auto;
      height: 100%;
      position: relative;
      & > view {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
}
</style>
